{include file="public/header" /}
<blockquote class="layui-elem-quote">
    数据库字段
</blockquote>
<div class="kllxs-form">
    <table id="table" lay-filter="table"></table>
</div>
{include file="public/footer" /}
<script>
    layui.use(["table", "dropdown", "util", "jquery", "popup"], function () {
        var table = layui.table;
        var dropdown = layui.dropdown;
        var util = layui.util;
        var $ = layui.$;
        var popup = layui.popup;

        // 表单
        table.render({
            elem: "#table",
            url: "{:route('admin.mysql.fields')}?table={$table}",
            toolbar: '<div><button type="button" class="layui-btn layui-btn-normal layui-btn-xs" kllxs-on="add">添加</button></div>',
            cols: [[
                { type: 'numbers', fixed: 'left', title: "序号", align: 'center' },
                { title: '字段名', field: 'COLUMN_NAME', align: 'center' },
                { title: '类型', field: 'COLUMN_TYPE', align: 'center' },
                { title: '键值', field: 'COLUMN_KEY', align: 'center' },
                { title: '默认', field: 'COLUMN_DEFAULT', align: 'center' },
                { title: '备注', field: 'COLUMN_COMMENT', align: 'center' },
                {
                    title: "操作", fixed: 'right', align: 'center',
                    templet: `<div>
                            <button type="button" class="layui-btn layui-btn-primary layui-btn-xs" kllxs-on="more" data-id="{{= d.COLUMN_NAME }}">
                                更多
                                <i class="layui-icon layui-icon-down"></i>
                            </button>
                        </div>`
                }
            ]],
            method: "post",
            parseData: function (res) {
                // console.log(res)
            }
        })

        util.on("kllxs-on", {
            more: function () {
                var data_id = $(this).attr("data-id")
                var table = `{$table}`;
                dropdown.render({
                    elem: this, // 绑定元素选择器，此处指向 class 可同时绑定多个元素
                    show: true,
                    data: [{
                        title: '编辑字段',
                        id: "edit"
                    }, {
                        title: '删除字段',
                        id: "del"
                    }],
                    click: function (obj) {
                        if (obj.id === "edit") {
                            popup.iframe(`{:route("admin.mysql.editField")}?table={$table}&field=${data_id}`)
                        } else {
                            popup.confirm(`{:route("admin.mysql.delField")}`, { table: `{$table}`, field: data_id })
                        }
                    }
                });
            },
            add: function () {
                popup.iframe(`{:route("admin.mysql.addField")}?table={$table}`)
            }
        })

    })
</script>